<!--遮罩层-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
    <div class="pop-top">
        <h2>注文をキャンセルする</h2>
        <span class="pop-close fa fa-close"></span>
    </div>
    {{ form_ajax('onCancelOrder', { class: 'form-horizontal'}) }}
    <div class="pop-content">
            <input type="hidden" name="sn" id="sn"  value="" />
            <input type="hidden" name="manual" id="manual"  value="2" />
            <textarea style="width: 95%;height:200px" name="remark" maxlength="255" required placeholder="キャンセル理由を入力してください"></textarea>
    </div>
    <div class="pop-foot">
        <input type="button" value="いいえ" class="pop-ok pop-close">
        <input type="submit" value="はい" class="pop-cancel">
    </div>
    {{ form_close() }}
</div>
<style>
    *{padding:0px;margin:0px;}
    .pop {  display: none;  width: 80%;  position: fixed;  top: 50%;  left: 50%;  margin: -191px 0 0 -46%;  padding: 25px;  z-index: 130;  border-radius: 8px;  background-color: #fff;  box-shadow: 0 3px 18px rgba(100, 0, 0, .5);  }
    .pop-top{  height:40px;  width:100%;  border-bottom: 1px #E5E5E5 solid;  }
    .pop-top h2{  float: left;  display:black}
    .pop-top span{  float: right;  cursor: pointer;font-size:18px;}
    .pop-foot{  height:50px;  line-height:50px;  width:100%;  border-top: 1px #E5E5E5 solid;  text-align: right;  }
    .pop-foot input{ width: 40% !important; }
    .pop-cancel, .pop-ok {  padding:8px 15px;  margin:15px 5px;  border: none;  border-radius: 5px;  background-color: #F3B6BF;  color: #fff;  cursor:pointer;  }
    .pop-cancel {  background-color: #FFF;  border:1px #CECECE solid;  color: #000;  }
    .pop-content{margin:10px 0;}
    .bgPop{  display: none;  position: fixed;  z-index: 129;  left: 0;  top: 0; bottom:0;right:0;  background: rgba(0,0,0,.2);  }
</style>
{% put scripts %}
<script>
    $(document).ready(function () {
        $('.pop-close').click(function () {
            $('.bgPop,.pop').hide();
        });

        $('.click_pop').click(function () {
            $('.bgPop,.pop').show();
        });

        $('.order_pay_cancel').click(function () {
            $('.pop-content #sn').val($(this).attr('data-sn'));
            $('.bgPop,.pop').show();
        });

    })

</script>
{% endput %}